<template>
	<view class="home">
		<view class="top">
			<view class="first">
				<image src="../../static/home/home1.png"></image>
				<text>视频相亲</text>
			</view>
			<view class="first">
				<image src="../../static/home/home2.png"></image>
				<text>专属相亲</text>
			</view>
			<view class="first">
				<image src="../../static/home/home3.png"></image>
				<text>发现动态</text>
			</view>
			<view class="first">
				<image src="../../static/home/home4.png"></image>
				<text>排行榜</text>
			</view>
		</view>
		<view class="cosntent">
			<view class="child">
				<view class="left">
					<view class="one" @tap="tabBtn(1)">
						<text :class="act==1?'active':''" >推荐</text>
						<image src="../../static/home/line.png" v-show="act==1"></image>
					</view>	
					<view class="ones" @tap="tabBtn(2)">
						<text :class="act==2?'active':''" >附近的人</text>
						<image src="../../static/home/line.png" v-show="act==2"></image>
					</view>	
					<view class="one " @tap="tabBtn(3)">
						<text :class="act==3?'active':''" >好友</text>
						<image src="../../static/home/line.png" v-show="act==3"></image>
					</view>	
				</view>
				<view class="right">
					<image src="../../static/home/shaixuan.png"></image>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="list_left">
					<view class="img">
						<image src="../../static/home/home1.png"></image>
					</view>
					<view class="one_type">
						<view class="one">玖相</view>
						<view class="two">
							<text>24岁</text>
							<text>新郑市</text>
						</view>
						<view class="three">
							世界很美丽，你是那个世界很美丽，你是那个世界很美丽，你是那个世界很美丽，你是那个
						</view>
					</view>
				</view>	
				<view class="list_right">
					<image src="../../static/home/kongxin.png"></image>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="list_left">
					<view class="img">
						<image src="../../static/home/home1.png"></image>
					</view>
					<view class="one_type">
						<view class="one">玖相</view>
						<view class="two">
							<text>24岁</text>
							<text>新郑市</text>
						</view>
						<view class="three">
							世界很美丽，你是那个…
						</view>
					</view>
				</view>	
				<view class="list_right">
					<image src="../../static/home/kongxin.png"></image>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="list_left">
					<view class="img">
						<image src="../../static/home/home1.png"></image>
					</view>
					<view class="one_type">
						<view class="one">玖相</view>
						<view class="two">
							<text>24岁</text>
							<text>新郑市</text>
						</view>
						<view class="three">
							世界很美丽，你是那个…
						</view>
					</view>
				</view>	
				<view class="list_right">
					<image src="../../static/home/kongxin.png"></image>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="list_left">
					<view class="img">
						<image src="../../static/home/home1.png"></image>
					</view>
					<view class="one_type">
						<view class="one">玖相</view>
						<view class="two">
							<text>24岁</text>
							<text>新郑市</text>
						</view>
						<view class="three">
							世界很美丽，你是那个…
						</view>
					</view>
				</view>	
				<view class="list_right">
					<image src="../../static/home/kongxin.png"></image>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="list_left">
					<view class="img">
						<image src="../../static/home/home1.png"></image>
					</view>
					<view class="one_type">
						<view class="one">玖相</view>
						<view class="two">
							<text>24岁</text>
							<text>新郑市</text>
						</view>
						<view class="three">
							世界很美丽，你是那个…
						</view>
					</view>
				</view>	
				<view class="list_right">
					<image src="../../static/home/kongxin.png"></image>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="list_left">
					<view class="img">
						<image src="../../static/home/home1.png"></image>
					</view>
					<view class="one_type">
						<view class="one">玖相</view>
						<view class="two">
							<text>24岁</text>
							<text>新郑市</text>
						</view>
						<view class="three">
							世界很美丽，你是那个…
						</view>
					</view>
				</view>	
				<view class="list_right">
					<image src="../../static/home/kongxin.png"></image>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="list_left">
					<view class="img">
						<image src="../../static/home/home1.png"></image>
					</view>
					<view class="one_type">
						<view class="one">玖相</view>
						<view class="two">
							<text>24岁</text>
							<text>新郑市</text>
						</view>
						<view class="three">
							世界很美丽，你是那个…
						</view>
					</view>
				</view>	
				<view class="list_right">
					<image src="../../static/home/kongxin.png"></image>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="list_left">
					<view class="img">
						<image src="../../static/home/home1.png"></image>
					</view>
					<view class="one_type">
						<view class="one">玖相</view>
						<view class="two">
							<text>24岁</text>
							<text>新郑市</text>
						</view>
						<view class="three">
							世界很美丽，你是那个…
						</view>
					</view>
				</view>	
				<view class="list_right">
					<image src="../../static/home/kongxin.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			act:1
		};
	},
	methods: {
		tabBtn(num){
			this.act=num;
		}
	}
};
</script>

<style lang="less" scoped>
.home {
	width: 100%;
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 190rpx;
		padding: 40rpx 20rpx 30rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		.first {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 25%;
			align-items: center;
			image {
				width: 100rpx;
				height: 100rpx;
			}
			text {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-top: 10rpx;
			}
		}
	}
	.cosntent{
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	 .child{
		 display: flex;
		 justify-content: space-between;
		.left{
			display: flex;
			justify-content: flex-start;
			.one{
				display: flex;
				flex-direction: column;
				text-align: center;
				text{
					font-size:28rpx;
					font-family:Source Han Sans CN;
					font-weight:400;
					color:rgba(102,102,102,1);
					padding: 0 30rpx 10rpx 0 ;
				}
				image{
					width: 32rpx;
					height: 8rpx;
					margin-left: 13rpx;
				}
			} 
			.ones{
				display: flex;
				flex-direction: column;
				text-align: center;
				text{
					font-size:28rpx;
					font-family:Source Han Sans CN;
					font-weight:400;
					color:rgba(102,102,102,1);
					padding: 0 30rpx 10rpx 0 ;
				}
				image{
					width: 32rpx;
					height: 8rpx;
					margin-left: 35rpx;
				}
			} 
			.active{
				font-size:32rpx !important;
				font-family:Source Han Sans CN !important;
				font-weight:bold !important;
				color:rgba(237,44,97,1) !important;
			}
		}
		.right{
			width: 40rpx;
			height: 40rpx;
			image{
				width: 100%;
				height:100%;
			}
		}
	 }	
	 //列表
	 .list{
		 width: 100%;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 padding: 15rpx 0;
		 box-sizing: border-box;
		  margin-top:20rpx;
		 .list_left{
			 display: flex;
			 justify-content: flex-start;
			  align-items: center;
			 width: 70%;
			 .img{
				 width: 100rpx;
				 height: 100rpx;
				 border-radius: 50%;
				 overflow: hidden;
				 margin-right: 20rpx;
				 flex-shrink: 0;
				 image{
					 width: 100%;
					 height: 100%;
				 }
			 }
		 }
		 .one_type{
			 display: flex;
			 flex-direction: column;
			 width: 70%;
			 .one{
				 font-size:30rpx;
				 font-family:PingFang SC;
				 font-weight:500;
				 color:rgba(51,51,51,1);
			 }
			 .two{
				 text{
					 display: inline-block;
					 font-size:20rpx;
					 font-family:PingFang SC;
					 font-weight:500;
					 color:rgba(255,255,255,1);
					
					 &:nth-child(1){
						 padding: 3rpx 13rpx;
						 border-radius: 20rpx;
						 background-color: #FA9FB6;
						 margin-right: 10rpx;
					 }
					 &:nth-child(2){
						 padding: 3rpx 13rpx;
						 border-radius: 20rpx;
						 background-color: #95B5FE;
						 color:#fff;
					 }
				 }
			 }
			 .three{
				 font-size:24rpx;
				 font-family:Source Han Sans CN;
				 font-weight:400;
				 color:rgba(102,102,102,1);
				 white-space: nowrap;
				 text-overflow: ellipsis;
				 overflow: hidden;
			 }
		 }
		 .list_right{
			 width: 56rpx;
			 height: 43rpx;
			 image{
				 width: 100%;
				 height: 100%;
			 }
		 }
	 }
	}
}
</style>
